<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>addStudent</title>
</head>
<style>
    html {
        height: 100%;
        width: 100%;
        overflow: hidden;
        margin: 0;
        padding: 0;
        background: url(../imgs/img21.png) no-repeat 0px 0px;
        background-size: 100% 100%;
        -moz-background-size: 100% 100%;
        /*opacity:.20;*/
    }
    /*body {
        background-color: pink;
    }*/
    .err_msg{
        color: red;
        font-size: 13px;
        font-weight: 500;
    }
    /*#stu_table{
        opacity:.50;
    }*/
</style>
<body>
<!--如何批量添加？-->
<h2 align="center">添加学生数据</h2>
<hr>
<table align="center" border="1" width="50%" cellspacing="0" id="stu_table">
    <tr>
        <th>姓名</th>
        <th>生日</th>
        <th>数学</th>
        <th>英语</th>
        <th>班级</th>
        <th>住址</th>
        <th>操作</th>
    </tr>
    <form action="/stuCURD/addServlet" method="post" id="addForm">
        <tr align="center">
            <td class="text">
                <input name="sname" id="sname"><br>
                <span id="sname_err1" class="err_msg" style="display: none">请输入姓名</span>
                <span id="sname_err2" class="err_msg" style="display: none">姓名格式有误</span>
                <span id="sname_err3" class="err_msg" style="display: none">该姓名已存在</span>
            </td>

            <td class="date">
                <input type="date" name="birthday" id="birthday" value="2001-01-01"><br>
                <span id="birthday_err1" class="err_msg" style="display: none">请选择日期</span>
                <span id="birthday_err2" class="err_msg" style="display: none">日期格式有误</span>
            </td>

            <td class="score">
                <input name="math" id="math"><br>
                <span id="math_err1" class="err_msg" style="display: none">请输入分数</span>
                <span id="math_err2" class="err_msg" style="display: none">分数格式有误</span>
            </td>
            <td class="score">
                <input name="english" id="english">
                <span id="english_err1" class="err_msg" style="display: none">请输入分数</span>
                <span id="english_err2" class="err_msg" style="display: none">分数格式有误</span>
            </td>

            <td class="text">
                <input name="className" id="className"><br>
                <span id="class_err1" class="err_msg" style="display: none">请输入班级</span>
                <span id="class_err2" class="err_msg" style="display: none">班级格式有误</span>
            </td>

            <td class="text">
                <input name="address" id="address"><br>
                <span id="address_err1" class="err_msg" style="display: none">请输入地址</span>
                <span id="address_err2" class="err_msg" style="display: none">地址格式有误</span>
            </td>
            <td><input type="submit" value="快速添加"></td>
        </tr>
    </form>
</table>
<script>
    var snameInput = document.getElementById("sname");
    var birthdayInput = document.getElementById("birthday");
    var mathInput = document.getElementById("math");
    var englishInput = document.getElementById("english");
    var classInput = document.getElementById("className");
    var addressInput = document.getElementById("address");

    var snameErr1 = document.getElementById("sname_err1");
    var birthdayErr1 = document.getElementById("birthday_err1");
    var mathErr1 = document.getElementById("math_err1");
    var englishErr1 = document.getElementById("english_err1");
    var classErr1 = document.getElementById("class_err1");
    var addressErr1 = document.getElementById("address_err1");

    var snameErr2 = document.getElementById("sname_err2");
    var birthdayErr2 = document.getElementById("birthday_err2");
    var mathErr2 = document.getElementById("math_err2");
    var englishErr2 = document.getElementById("english_err2");
    var classErr2 = document.getElementById("class_err2");
    var addressErr2 = document.getElementById("address_err2");

    var snameErr3 = document.getElementById("sname_err3");

    snameInput.onfocus = function () {
        snameErr1.style.display = "none";
        snameErr2.style.display = "none";
        snameErr3.style.display = "none";
    };
    birthdayInput.onfocus = function () {
        birthdayErr1.style.display = "none";
        birthdayErr2.style.display = "none";
    };
    mathInput.onfocus = function () {
        mathErr1.style.display = "none";
        mathErr2.style.display = "none";
    };
    englishInput.onfocus = function () {
        englishErr1.style.display = "none";
        englishErr2.style.display = "none";
    };
    classInput.onfocus = function () {
        classErr1.style.display = "none";
        classErr2.style.display = "none";
    };
    addressInput.onfocus = function () {
        addressErr1.style.display = "none";
        addressErr2.style.display = "none";
    };

    snameInput.onblur = checkSname;
    birthdayInput.onblur = checkBirthday;
    mathInput.onblur = checkMath;
    englishInput.onblur = checkEnglish;
    classInput.onblur = checkClass;
    addressInput.onblur = checkAddress;

    //sname VARCHAR(32) UNIQUE
    function checkSname() {
        let name = snameInput.value.trim();
        let flag1 = false;
        let reg2 = /^.{1,32}$/;
        let flag2 = reg2.test(name);
        let flag3 = false;
        if (name) {
            flag1 = true;
            snameErr1.style.display = 'none';
            if (flag2) {
                snameErr2.style.display = 'none';
                flag3 = checkExists();
            } else {
                snameErr2.style.display = '';
            }
        } else {
            snameErr1.style.display = '';
        }
        return flag1 && flag2 && flag3;
    }

    //检查用户名是否已存在
    function checkExists() {
        let name = snameInput.value.trim();
        //location.href = '/selectBySnameServlet?sname=' + name;
        // let flag = '${stu == null} || ${stu.sname == name}';
        let flag = snameInput.value.trim() !== '张三';
        if (flag) {
            snameErr3.style.display = 'none';
        } else {
            snameErr3.style.display = '';
        }
        return flag;
    }

    //birthday date '1990-01-01' - '2009-12-31'
    function checkBirthday() {
        let birthday = birthdayInput.value.trim();
        let flag1 = false;
        let flag2 = birthday >= '1990-01-01' && birthday <= '2009-12-31';
        if (birthday) {
            flag1 = true;
            birthdayErr1.style.display = 'none';
            if (flag2) {
                birthdayErr2.style.display = 'none';
            } else {
                birthdayErr2.style.display = '';
            }
        } else {
            birthdayErr1.style.display = '';
        }
        return flag1 && flag2;
    }

    //math INT 0-100
    function checkMath() {
        let score = mathInput.value.trim();
        let flag1 = false;
        let flag2 = score >= 0 && score <= 100;
        if (score) {
            flag1 = true;
            mathErr1.style.display = 'none';
            if (flag2) {
                mathErr2.style.display = 'none';
            } else {
                mathErr2.style.display = '';
            }
        } else {
            mathErr1.style.display = '';
        }
        return flag1 && flag2;
    }

    //english INT 0-100
    function checkEnglish() {
        let score = englishInput.value.trim();
        let flag1 = false;
        let flag2 = score >= 0 && score <= 100;
        if (score) {
            flag1 = true;
            englishErr1.style.display = 'none';
            if (flag2) {
                englishErr2.style.display = 'none';
            } else {
                englishErr2.style.display = '';
            }
        } else {
            englishErr1.style.display = '';
        }
        return flag1 && flag2;
    }

    //className  VARCHAR(32)
    function checkClass() {
        let className = classInput.value.trim();
        let flag1 = false;
        let reg = /^.{1,32}$/;
        let flag2 = reg.test(className);
        if (className) {
            flag1 = true;
            classErr1.style.display = 'none';
            if (flag2) {
                classErr2.style.display = 'none';
            } else {
                classErr2.style.display = '';
            }
        } else {
            classErr1.style.display = '';
        }
        return flag1 && flag2;
    }

    //address VARCHAR(32)
    function checkAddress() {
        let address = addressInput.value.trim();
        let flag1 = false;
        let reg = /^.{1,32}$/;
        let flag2 = reg.test(address);
        if (address){
            flag1 = true;
            addressErr1.style.display = 'none';
            if (flag2) {
                addressErr2.style.display = 'none';
            } else {
                addressErr2.style.display = '';
            }
        } else {
            addressErr1.style.display = '';
        }
        return flag1 && flag2;
    }

    //绑定表单提交事件
    var addForm = document.getElementById("addForm");
    addForm.onsubmit = checkAll;

    function checkAll() {
        console.log("checkAll:");
        console.log(checkSname(), checkBirthday(), checkMath());
        console.log(checkEnglish(), checkClass(), checkAddress());
        let flag = checkSname() && checkBirthday() && checkMath() && checkEnglish() && checkClass() && checkAddress();
        if (flag) {
            alert("添加成功！");
        } else {
            alert("添加失败！")
        }
        return flag;
    }
</script>
</body>
</html>